<template>
  <div style="height:750px">
    <!-- {{ form }} {{ userid }} -->
    <!-- {{ form2 }} -->
    <div style="display: inline-block">搜索：</div>
    <el-input
      v-model="search"
      style="display: inline-block;width: 260px; margin-right:20px"
      placeholder="请输入搜索内容"
    ></el-input>
    <el-button type="danger" @click="exportExcel">导出</el-button>
    <div style="height:650px;margin-top:30px;">
      <el-table
        :data="tables"
        :row-class-name="tableRowClassName"
        
        border
        style="width:100%"
      >
        <el-table-column
          prop="olderNumber"
          label="工单号"
          width="140"
        ></el-table-column>
        <el-table-column label="工单标题">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column label="工单详情" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.detail }}</span>
          </template>
        </el-table-column>

        <el-table-column label="客户名">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.customer }}</span>
          </template>
        </el-table-column>

        <el-table-column label="紧急程度">
          <template slot-scope="scope">
            <el-tag :type="scope.row.urgent == 2 ? 'danger' : 'success'">{{
              scope.row.urgent == 2 ? "紧急" : "普通"
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="电话">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tel }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.adminName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="指派人">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.worker }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单状态">
          <template slot-scope="scope">
            <el-tag
              style="margin-left: 10px"
              :type="
                scope.row.state == '处理完毕'
                  ? 'success'
                  : scope.row.state == '受理中'
                  ? ''
                  : scope.row.state == '工人处理中'
                  ? 'warning'
                  : 'danger'
              "
              >{{ scope.row.state }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="操作" width="170" style="text-align:center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-search"
              type="primary"
              size="mini"
              circle
              @click="lookUp(scope.row)"
            ></el-button>

            <el-button
              type="primary"
              icon="el-icon-s-opportunity"
              size="mini"
              circle
              @click="showStep(scope.row)"
              v-if="scope.row.state == '已驳回' ? false : true"
            ></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              content="查看拒绝理由"
              placement="top-start"
            >
              <el-button
                type="danger"
                icon="el-icon-question"
                size="mini"
                circle
                v-if="scope.row.state == '已驳回' ? true : false"
                @click="showReject(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="重新派单"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-refresh"
                size="mini"
                circle
                v-if="scope.row.state == '已驳回' ? true : false"
                @click="Redistribute(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="操作记录"
              placement="top-start"
            >
              <el-button
                type="warning"
                icon="el-icon-s-order"
                circle
                size="mini"
                @click="showRecord(scope.row)"
              ></el-button
            ></el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogFormVisible2" title="反驳理由">
        <span>{{ reject }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible2 = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-dialog :title="title2" :visible.sync="dialogFormVisible3">
        
        <el-form ref="form2" :model="form2" :rules="rules" label-width="80px">
          <el-form-item label="工单标题：" label-width="100px" prop="title">
            <el-input v-model="form2.title" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="工单号：" label-width="100px" prop="olderNumber">
            <el-input
              v-model="form2.olderNumber"
              style="width:300px"
            ></el-input>
          </el-form-item>

          <el-form-item label="客户姓名：" label-width="100px">
            <el-input
              v-model="form2.customer"
              :disabled="true"
              style="width:300px"
            ></el-input>
          </el-form-item>

          <el-form-item label="上传图片：" label-width="100px">
            <el-upload
              class="upload-demo"
              name="picture"
              action="http://localhost:8888/upload"
              :headers="myHeaders"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture"
              :show-file-list="true"
            >
              <el-button size="small" type="primary">{{ imgText }}</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="已上传图片:"
            label-width="100px"
            v-if="title2 == '重新派发工单' && form2.imgUrl != null"
          >
            <el-card :body-style="{ padding: '0px' }">
              <img class="image" :src="require('D://ss/' + form2.imgUrl)" alt />
            </el-card>
          </el-form-item>

          <el-form-item
            label="工单详情："
            style="width:600px"
            prop="detail"
            label-width="100px"
          >
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 4 }"
              v-model="form2.detail"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机号：" label-width="100px" prop="tel">
            <el-input v-model="form2.tel" style="width:300px"></el-input>
          </el-form-item>

          <el-form-item label="客户地址：" label-width="100px" prop="addr">
            <el-input v-model="form2.addr" style="width:460px"></el-input>
          </el-form-item>

          <el-form-item label="紧急程度：" label-width="100px">
            <el-radio v-model="form2.urgent" label="1">普通</el-radio>
            <el-radio v-model="form2.urgent" label="2">紧急</el-radio>
          </el-form-item>

          <el-form-item label="选择工人：" prop="worker" label-width="100px">
            <el-select v-model="form2.worker" placeholder="请选择工人">
              <el-option
                v-for="(item, index) in workers"
                :label="item.username"
                :key="index"
                :value="item.username"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancel()" style="margin-left:-62px"
              >取消</el-button
            >
            <el-button type="primary" @click="onSubmit()" style="float:right"
              >重新派发</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <div class="yema">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ::current-page-sync="currentPage"
        :page-sizes="[8, 10, 15]"
        :page-size="pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="contents.length"
      ></el-pagination>
    </div>
    <div>
      <el-dialog :visible.sync="dialogFormVisible">
        <el-steps :active="state2 + 1">
          <el-step title="受理中" icon="el-icon-edit"></el-step>
          <el-step title="工人处理中" icon="el-icon-upload"></el-step>
          <el-step title="处理完毕" icon="el-icon-picture"></el-step>
        </el-steps>
      </el-dialog>
    </div>
    <dialogs v-if="addVisible" ref="lookolder"></dialogs>

    <el-dialog :visible.sync="dialogFormVisible4" title="操作记录">
      <el-table
        :data="record"
        border
        v-loading="dataListLoading"
        style="width: 100%;"
      >
        <el-table-column
          header-align="center"
          align="center"
          label="序号"
          type="index"
        ></el-table-column>

        <el-table-column
          prop="adminName"
          header-align="center"
          align="center"
          label="创建人"
        ></el-table-column>

        <el-table-column
          prop="customer"
          header-align="center"
          align="center"
          label="客户"
        ></el-table-column>

        <el-table-column
          prop="worker"
          header-align="center"
          align="center"
          label="指派人"
        ></el-table-column>

        <el-table-column
          prop="state"
          header-align="center"
          align="center"
          label="工单状态"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import dialogs from "./olderinfo";
export default {
  components: {
    dialogs,
  },
  inject: ["reload"],
  data() {
    return {
      myHeaders: {
        Authorization: this.$store.getters.Authorization,
      },
      id: 2,
      state2: 0,
      currentPage: 1,
      title: "",
      title2: "",
      pagesize: 8,
      contents: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      addVisible: false,
      dataListLoading: false,
      imgText: "",
      workers: [],
      reject: "",
      fileList: [],
      record: [],
      form: {
        username: "",
        age: "",
        sex: "",
        tel: "",
      },
      search: "",
      form2: {
        customer: "",
        title: "",
        detail: "",
        tel: "",
        addr: "",
        worker: "",
        urgent: "",
        olderNumber: "",
        adminName: "",
        state: 0,
        problemId: "",
        imgUrl:"",
      },
      rules: {
        title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
        olderNumber: [
          { required: true, message: "请输入工单号", trigger: "blur" },
        ],
        detail: [
          { required: true, message: "请输入问题描述", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        worker: [{ required: true, message: "请选择工人", trigger: "blur" }],
        addr: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
    };
  },
  created() {
    this.showtable();
  },

  computed: {
    tables() {
      const search = this.search;
      let contents2 = this.contents.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
      if (search) {
        return contents2.filter((data) => {
          return Object.keys(data).some((key) => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      return contents2;
    },
  },

  methods: {
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const tHeader = [
          "序号",
          "工单号",
          "工单标题",
          "工单详情",
          "客户名",
          "紧急程度",
          "电话",
          "创建人",
          "指派人",
          "创建时间",
          "工单状态",
        ];
        // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "index",
          "olderNumber",
          "title",
          "detail",
          "customer",
          "urgent",
          "tel",
          "adminName",
          "worker",
          "time",
          "state",
        ];
        // 上面的index、nickName、name是tableData里对象的属性
        for (const item in this.contents) {
          this.contents[item].index = parseInt(item) + 1;
        }
        const list = this.contents; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "列表excel");
      });
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    showtable() {
      this.$axios
        .get("/findAllOlders", {})
        .then((res) => {
          this.contents = res.data.result;

          var stateList = {
            0: "受理中",
            1: "工人处理中",
            2: "处理完毕",
            3: "已驳回",
          };
          for (const item of this.contents) {
            item.state = stateList[item.state];

            item.time = this.$moment(item.time).format("YYYY-MM-DD");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
    showStep(row) {
      var statelist = {
        受理中: 0,
        工人处理中: 1,
        处理完毕: 2,
      };
      this.state2 = statelist[row.state];
      this.dialogFormVisible = true;
    },
    showReject(row) {
      this.reject = row.reject;
      this.dialogFormVisible2 = true;
    },
    Redistribute(row) {
      console.log(row);
      this.title2 = "重新派发工单";
      this.form2 = row;
      this.form2.urgent = String(row.urgent);
      if (this.form2.imgUrl == ""||this.form2.imgUrl==null) {
        this.form2.imgUrl=null;
        this.imgText = "上传图片";
        console.log( this.form2.imgUrl);
      } else {
        this.imgText = "修改图片";
      }

      let params = {
        id: 2,
      };
      this.$axios({
        method: "post",
        params: params,
        url: "/user/findWorkers",
      }).then((res) => {
        this.workers = res.data.result;
      });

      this.dialogFormVisible3 = true;
    },
    onSubmit() {
      this.$refs.form2.validate((valid) => {
        this.form2.state = 0;
        if (valid) {
          this.$axios({
            method: "post",
            url: "/Redistribute",
            data: this.form2,
          })
            .then((res) => {
              if (res.data.code == 200) {
                this.dialogFormVisible3 = false;
                this.showtable();
                this.$message.success("重新派发工单成功");
                this.$axios({
                  method: "post",
                  data: {
                    orderId: this.form2.id,
                    worker: this.form2.worker,
                    state: this.form2.state,
                  },
                  url: "/AddRecord",
                })
                  .then((res) => {
                    console.log(res);
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                this.$refs.form.resetFields();
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
      });
    },
    cancel() {
      this.$refs.form2.resetFields();
      this.reload();
    },

    lookUp(row) {
      this.addVisible = true;
       if (row.imgUrl == "") {
        row.imgUrl = null;
      }
      this.$nextTick(() => {
        //调用子组件的方法

        this.$refs.lookolder.init(row);
      });
      // this.form2 = row;
      // this.title = "查看详情";
      // this.dialogFormVisible4 = true;
      // let orderid = this.form2.id;
      // this.$axios({
      //   method: "get",
      //   url: "/viewImg/" + orderid,
      //   responseType: "blob",
      // })
      //   .then((res) => {
      //     let blob = new Blob([res.data]); // 返回的文件流数据
      //     let url = window.URL.createObjectURL(blob);

      //     this.mapSrc = url;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });

      // },
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(res) {
      console.log(res);
      this.form2.imgUrl = res.fileName;
    },
    handleRemove(file) {
      console.log(file);
      this.$axios({
        method: "post",
        url: "/deleteImg",
        params: {
          path: file.response.fileAddress,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success("图片已从本地删除");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showRecord(row) {
      console.log(row);
      this.dialogFormVisible4 = true;
      this.dataListLoading =true;
      this.$axios({
        method: "get",
        params: {
          orderId: row.id,
        },
        url: "/listRecord",
      })
        .then((res) => {
          console.log(res);
          this.record = res.data.list;
          var stateList = {
            0: "受理中",
            1: "处理中",
            2: "处理完毕",
            3: "已驳回",
          };
          for (const item of this.record) {
            item.adminName = row.adminName;
            item.customer = row.customer;
            item.state = stateList[item.state];
          }
          setTimeout(()=>{
            this.dataListLoading = false;
          },500)
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.el-table td,
.el-table th {
  text-align: center;
}
.el-table .warning-row {
  background: rgb(230, 248, 253);
}

.el-table .success-row {
  background: #edebf9;
}
.image {
  height: 220px;
}
</style>
